<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="./lib/react.development.js"></script>
    <script src="./lib/react-dom.development.js"></script>
</head>

<body>
    <div id="root"></div>
    <div id="root2"></div>
    <script>
        // 1. 同一个页面可以有多个 容器. 但是一般不会这么做
        // const root1 = ReactDOM.createRoot(document.querySelector("#root"));
        // const root2 = ReactDOM.createRoot(document.querySelector("#root2"));

        // root1.render('我是舞台1')
        // root2.render('我是舞台2')

        // 2. 同一个容器 只能被指定一次作为舞台, 会有警告信息
        // const root1 = ReactDOM.createRoot(document.querySelector("#root"));
        // const root2 = ReactDOM.createRoot(document.querySelector("#root"));

        // root1.render('我是舞台1');
        // root2.render('我是舞台2');

        // 3. 同一个root 可以render多次,后面的会覆盖前面的
        // const root = ReactDOM.createRoot(document.querySelector("#root"));
        // root.render('第一次渲染的内容');
        // root.render('第二次渲染的内容');

        // 4. 不能指定 html 和body作为容器
        // const root = ReactDOM.createRoot(document.documentElement); // html
        // root.render('渲染一下试试');
        const root = ReactDOM.createRoot(document.body); // html
        root.render('渲染一下试试');

    </script>

    <div>123</div>
</body>

</html>